<template>
  <div class="advanced-queries-container">
    <div style="display: flex;">
      <el-button
        size="small"
        icon="el-icon-plus"
        type="primary"
        @click="$emit('structure')">
        构建高级查询
      </el-button>
      <template
        v-if="advancedQueries.structure.columns.length">
        <el-select
          size="small"
          style="margin: 0 10px;"
          placeholder="请选择匹配条件"
          v-model="advancedQueries.structure.type">
          <el-option label="完全匹配" value="0"></el-option>
          <el-option label="模糊匹配" value="1"></el-option>
        </el-select>
        <el-button
          type="primary"
          size="small"
          @click="save">
          保 存
<!--          <vab-icon icon="add-fill"/>-->
        </el-button>
        <el-button
          size="small"
          :disabled="!advancedQueries.structure.id"
          @click="$emit('remove')">
          删 除
<!--          <vab-icon icon="delete-bin-line"/>-->
        </el-button>
      </template>
    </div>
    <div class="query-name-list">
      <div class="query-name">
        <div
          @click="$emit('change', index)"
          class="query-name-item"
          :class="{'active-query-name': advancedQueries.currentIndex === index}"
          v-for="(item, index) in advancedQueries.list">
          <div>{{ item.queryName }}</div>
        </div>
        <div v-if="!advancedQueries.list.length">
          <el-empty description="暂未构造高级查询"></el-empty>
        </div>
      </div>
      <div
        v-if="advancedQueries.structure.columns.length"
        style="width: 70%; height: 300px; overflow-y: auto;">
        <el-form
          size="small"
          ref="advancedQueries"
          :model="advancedQueries.structure"
          label-position="top">
          <el-form-item
            prop="name"
            label="查询名称"
            :rules="rulesName">
            <el-input
              style="width: 200px;"
              v-model="advancedQueries.structure.name"
              placeholder="请输入高级查询名称">
            </el-input>
          </el-form-item>
          <el-form-item prop="columns" label="查询条件" :rules="rulesArr">
            <div style="margin-bottom: 10px;"
                 v-for="(item, indexColumn) in advancedQueries.structure.columns">
              <div style="display: flex;">
                <el-select
                  filterable
                  clearable
                  style="width: 100%;"
                  v-model="item.columnName">
                  <el-option
                    v-for="(option, optionIndex) in searchList"
                    :key="'optionIndex' + optionIndex"
                    :label="option.label" :value="option.prop">
                  </el-option>
                </el-select>
                <el-select
                  :disabled="getType(item.columnName)"
                  style="width: 100%; margin: 0 10px;"
                  v-model="item.queryType">
                  <el-option
                    v-for="(option, optionIndex) in advancedQueries.matchList"
                    :key="'optionIndex' + optionIndex"
                    :label="option.label"
                    :value="option.value">
                    <span style="float: left">{{ option.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ option.value }}</span>
                  </el-option>
                </el-select>
                <el-input
                  v-if="!getType(item.columnName, indexColumn + '')"
                  style="width: 100%; margin-right: 10px;"
                  v-model="item.value"
                  placeholder="请输入匹配的值">
                </el-input>
                <el-select
                  v-else
                  filterable
                  clearable
                  style="width: 100%; margin-right: 10px;"
                  v-model="item.value">
                  <el-option
                    v-for="(option, optionIndex) in getTypeList(item.columnName, indexColumn + '')"
                    :label="option.label"
                    :key="'optionIndex' + optionIndex"
                    :value="option.value">
                  </el-option>
                </el-select>
                <el-button icon="el-icon-plus" @click="$emit('add')"></el-button>
                <el-button icon="el-icon-minus" @click="$emit('deleteColumn', indexColumn)"></el-button>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="text-align: right;">
      <el-button size="medium" @click="$emit('cancel')">取 消</el-button>
    </div>
  </div>
</template>

<script>
import matchList from "@/views/toolkit/dynamic/matchList";

export default {
  name: "AdvancedQueries",
  props: {
    dictionary: {
      type: Object,
      default: {}
    },
    searchList: {
      type: Array,
      default: []
    },
    advancedQueries: {
      type: Object,
      default: {
        visible: false,
        matchList: matchList.data,
        list: [],
        structure: {
          name: "",
          code: "",
          type: "0",
          columns: []
        },
        currentIndex: 0
      }
    }
  },
  data() {
    return {
      rulesArr: [
        {type: 'array', required: true, message: '请至少添加一个条件', trigger: 'change'}
      ],
      rulesName: [
        {required: true, message: '请输入高级查询名称', trigger: 'blur'},
        {min: 2, max: 15, message: '长度在2 到 15 个字符', trigger: 'blur'}
      ]
    }
  },
  methods: {
    getType(data, index) {
      const option = this.searchList.find(item => item.prop === data);
      if (option && option.dictType) {
        if (index) {
          this.advancedQueries.structure.columns[index].queryType = "eq";
        }
        return true
      } else {
        return false;
      }
    },
    getTypeList(data, index) {
      const option = this.searchList.find(item => item.prop === data);
      if (option && option.dictType) {
        return this.dictionary[option.dictType];
      } else {
        return [];
      }
    },
    save() {
      this.$refs['advancedQueries'].validate((valid) => {
        if (valid) {
          this.$emit("save");
        } else {
          return this.$notify.warning("表单验证不通过");
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.query-name-list {
  display: flex;
  justify-content: space-between;
  margin: 16px 0 30px 0;

  .query-name {
    width: 29%;
    height: 300px;
    overflow-y: auto;
    background-color: #fbfbfb;
  }

  .query-name-item {
    padding: 15px 20px;
    cursor: pointer;
  }

  .active-query-name {
    border-left: 2px solid #1890ff;
    background-color: #e8f4ff;
    color: #1890ff;
  }
}
</style>
